<template>
  <div class="cess1">
    <navi>客户案例</navi>
    <div class="cess22">
      <div class="cess_s" v-for="item in data.data.slice(1, 13)" :key="item.id">
        <div class="cess_s_img">
          <NuxtLink :to="'/news' + item.id + '.html'">
            <img :src="item.tupian" width="206" height="196" />
          </NuxtLink>
        </div>
        <div class="cess_s_title">
          <ul>
            <li>
              <NuxtLink :to="'/news/' + item.id + '.html'">{{
                item.biaoti
              }}</NuxtLink>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const runtimeConfig = useRuntimeConfig();
const { data }: any = await useFetch(runtimeConfig.public.apiBase + "/news?pageSize=100&pageNum=1&lanmu=4");
</script>

<style scoped>
.cess1 {
  width: 965px;
  margin: 0 auto;
  border: #c9c9c9 1px solid;
  height: auto;
}

.cess22 {
  width: 945px;
  height: 800px;
  margin: 15px auto;
}

.cess_s {
  width: 220px;
  height: 240px;
  float: left;
  background: url("/images/cass_22_bg.jpg") no-repeat top center;
  color: #fff;
  margin-left: 13px;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: auto;
}

.cess_s:hover {
  background: url("/images/cass_22_bg1.jpg") no-repeat top center;
  color: #fff;
}

.cess_s_img {
  width: 204px;
  height: 190px;
  margin: 6px auto;
}

.cess_s_title {
  margin: 10px auto 0px auto;
  width: 210px;
  height: 30px;
}

.cess_s_title li {
  list-style: none;
  float: left;
  line-height: 20px;
  padding-left: 10px;
}

.cess_s_mar {
  margin-left: 35px;
}

.cess_s a {
  color: #333333;
  text-decoration: none;
}

.cess_s a:hover {
  color: #ffffff;
  text-decoration: underline;
}
</style>